<template>
	<view style="background: #F8F8F8;height: 100vh;">
		<view class="home-content">
			<view class="top-header" v-if="userinfo">
				<view class="balance-top">
					<view class="top-center">
						<view class="t0">
							账户余额(元)
							<image src="../../static/images/home/group.png" mode="" @click="isShow = !isShow"></image>
						</view>
						<view class="t1" v-if="isShow">{{ userinfo.money }}</view>
						<view class="t1" v-else>******</view>
					</view>
					<view class="top-right">
						<view class="right-btn" @click="goToFlow">
							流水明细
							<image src="../../static/images/home/backBf1.png" mode=""></image>
						</view>
						<view class="right-btn" @click="goWithdrawal">
							余额提现
							<image src="../../static/images/home/backBf1.png" mode=""></image>
						</view>
					</view>
				</view>
				<view class="balance-list">
					<view class="list-item" @click="goToFlow">
						<view class="t0">
							{{ userinfo.today_income }}
						</view>
						<view class="t1">今日收益(元)</view>
					</view>
					<view class="list-item" @click="goOrder">
						<view class="t0">{{ userinfo.today_order }}</view>
						<view class="t1">今日订单(笔)</view>
					</view>
					<!-- <view class="list-item">
						<view class="t0">12.00</view>
						<view class="t1">今日退款(元)</view>
					</view> -->
				</view>
			</view>
			<view class="center-list" v-if="userinfo">
				<view class="list-item" @click="toDeviceList('')">
					<view class="t0">{{ userinfo.device_count?.all }}</view>
					<view class="t1">设备</view>
				</view>
				<view class="list-item" @click="toDeviceList('online')">
					<view class="t0">{{ userinfo.device_count?.online }}</view>
					<view class="t1">在线</view>
				</view>
				<view class="list-item" @click="toDeviceList('offline')">
					<view class="t0">{{ userinfo.device_count?.offline }}</view>
					<view class="t1">离线</view>
				</view>
				<view class="list-item" @click="toDeviceList('all_faults')">
					<view class="t0">{{ userinfo.device_count?.all_faults }}</view>
					<view class="t1">故障</view>
				</view>
			</view>
			<view class="service-box">
				<view class="tit">超管服务</view>
				<view class="service-list">
					<view class="service-item" @click="clickService(1)" v-if="isType === 1">
						<image src="../../static/images/home/group(1).png" mode=""></image>
						<text>扫码绑定</text>
					</view>
					<view class="service-item" @click="clickService(2)">
						<image src="../../static/images/home/group(2).png" mode=""></image>
						<text>设备</text>
					</view>
					<view class="service-item" @click="clickService(3)" v-if="isType === 1">
						<image src="../../static/images/home/group(3).png" mode=""></image>
						<text>场地</text>
					</view>
					<view class="service-item" @click="clickService(4)" v-if="isType === 1">
						<image src="../../static/images/home/编组备份 3@2x.png" mode=""></image>
						<text>订单</text>
					</view>
					<view class="service-item" @click="clickService(5)" v-if="isType === 1">
						<image src="../../static/images/home/编组备份 2@2x.png" mode=""></image>
						<text>统计</text>
					</view>
					<view class="service-item" @click="clickService(6)" v-if="isType === 1">
						<image src="../../static/images/home/编组备份@2x.png" mode=""></image>
						<text>用户管理</text>
					</view>
					<view class="service-item" @click="clickService(7)"
						v-if="userinfo&&userinfo.dl_roles&&userinfo.dl_roles.includes('admin')">
						<image src="../../static/images/home/编组备份 4@2x.png" mode=""></image>
						<text>总览</text>
					</view>
					<view class="service-item" @click="clickService(8)"
						v-if="userinfo&&userinfo.dl_roles&&userinfo.dl_roles.includes('repairman')">
						<image src="../../static/images/home/编组备份 5@2x.png" mode=""></image>
						<text>维修</text>
					</view>
				</view>
			</view>
		</view>
		<!-- 设置出泡泡时间 -->
		<view class="device-start" v-if="ishowBind">
			<view class="start-box">
				<view class="t0">设备绑定</view>
				<uni-forms ref="dynamicForm" label-width="100px">
					<uni-forms-item label="设备编号">{{ deviceName }}</uni-forms-item>
					<uni-forms-item label="所属场地)" required name="yl_cpp">
						<uni-data-select type="line" v-model="ground_id" :localdata="ground_list"
							@change="onChange"></uni-data-select>
					</uni-forms-item>
				</uni-forms>
				<button size="mini" @click="bindDevice" class="btn">提交</button>
			</view>
			<view class="close" @click="ishowBind = false">
				<image src="../../static/images/home/beifen1.png"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/index2.js';
	import store from '@/store/index.js'
	import {
		mapMutations
	} from 'vuex'
	import {
		toScanCode
	} from '@/component/scan'
	export default {
		data() {
			return {
				isType: 0, //1代理端 2商家端
				userinfo: null,
				isShow: false,
				ishowBind: false, //设备绑定
				deviceName: '', //设备编号
				ground_id: '', //所属场地
				ground_list: [], //场地列表
			};
		},
		onLoad() {},
		onShow() {
			let token = uni.getStorageSync("sstoken")
			if (!token) {
				uni.showToast({
					icon: "none",
					title: "未登录",
					success() {
						uni.navigateTo({
							url: "/pages/login/index"
						})
					}
				})

			} else {
				this.getKf()
				this.getAreaList()
				this.getUserInfo();
				let device_name = uni.getStorageSync("device_name")
				if (device_name) {
					this.deviceName = device_name
					this.ishowBind = true
				}
			}
		},
		methods: {
			...mapMutations(['saveUserInfo', 'saveKF']),
			getUserInfo() {
				api.getUserInfo().then(res => {
					this.userinfo = res.data.userinfo;
					this.isType = res.data.userinfo.type
					this.saveUserInfo(this.userinfo);
				});
			},
			bindDevice() {
				if (this.ground_id == '') {
					return uni.showToast({
						icon: "none",
						title: "请选择所属场地"
					})
				}
				api.bindDevice({
					name: this.deviceName,
					ground_id: this.ground_id
				}).then(res => {
					uni.showToast({
						icon: "none",
						title: "绑定成功"
					})
					uni.removeStorageSync("device_name")
					this.ishowBind = false
					this.getUserInfo();
				});

			},
			getAreaList() {
				api.getGroundList().then(res => {
					this.ground_list = res.data.map(item => {
						return {
							value: item.id,
							text: item.name
						}
					});
				});
			},
			getKf() {
				api.sysConfig({
					site: 'sys_kefu'
				}).then(res => {
					this.saveKF(res.data)
				})
			},
			goOrder() {
				uni.navigateTo({
					url: '/pages/order/list?type=today'
				});
			},
			goWithdrawal() {
				uni.navigateTo({
					url: '/pages/account/withdrawal'
				});
			},
			goToFlow() {
				uni.navigateTo({
					url: '/pages/account/flowingDetails'
				})
			},

			toDeviceList(selected) {
				uni.navigateTo({
					url: '/pages/device/list?type_status=' + selected
				})
			},
			clickService(type) {
				if (type === 1) {
					// toScanCode({
					// 	onlyFromCamera: true // 只允许通过相机扫码
					// }).then(res => {
					// 	this.deviceName = res
					// 	this.ishowBind = true
					// 	console.log(res)
					// })
					uni.removeStorageSync("device_name")
					uni.navigateTo({
						url: '/pages/scanner/scanner' // 设备
					});
				}
				if (type === 2) {
					uni.navigateTo({
						url: '/pages/device/list' // 设备
					});
				}
				if (type === 3) {
					uni.navigateTo({
						url: '/pages/area/list' // 场地
					});
				}
				if (type === 4) {
					uni.navigateTo({
						url: '/pages/order/list' //订单
					});
				}
				if (type === 5) {
					uni.navigateTo({
						url: '/pages/order/areaIncome' // 统计收益
					});
				}
				if (type === 6) {
					uni.navigateTo({
						url: '/pages/user/userManage' // 用户管理
					});
				}
				if (type === 7) {
					uni.navigateTo({
						url: '/pages/agent/agent' // 设备
					});
				}
				if (type === 8) {
					uni.navigateTo({
						url: '/pages/maintenance/groundMap' // 设备
					});
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.home-content {
		background: url('../../static/images/home/home-bg.png') no-repeat;
		background-size: 100% 408rpx;
		padding-bottom: 100rpx;

		.top-header {
			.balance-top {
				padding-top: 42rpx;
				margin-bottom: 54rpx;

				.top-center {
					text-align: center;
					position: relative;

					.t0 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
						font-style: normal;
						display: flex;
						align-items: center;
						justify-content: center;

						uni-image {
							width: 32rpx;
							height: 14rpx;
							margin-left: 5rpx;
						}
					}

					.t1 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 44rpx;
						color: #ffffff;
						line-height: 60rpx;
						font-style: normal;
					}
				}

				.top-right {
					position: absolute;
					right: 36rpx;
					top: 38rpx;

					.right-btn {
						border-radius: 24rpx;
						border: 2rpx solid #ffffff;
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
						width: 174rpx;
						line-height: 40rpx;
						text-align: center;
						font-style: normal;
						display: flex;
						align-items: center;
						justify-content: center;

						&:first-child {
							margin-bottom: 20rpx;
						}

						uni-image {
							width: 14rpx;
							height: 24rpx;
							margin-left: 8rpx;
						}
					}
				}
			}

			.balance-list {
				display: flex;
				padding: 0 34rpx;
				justify-content: space-around;
				text-align: center;

				.list-item {
					.t0 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 600;
						font-size: 44rpx;
						color: #ffffff;
						line-height: 60rpx;
						font-style: normal;
						margin-bottom: 8rpx;
					}

					.t1 {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #ffffff;
						line-height: 40rpx;
						font-style: normal;
					}
				}
			}
		}

		.center-list {
			background: url('../../static/images/user/group1.png');
			background-size: 100% 100%;
			display: flex;
			justify-content: space-around;
			margin: 8rpx 22rpx;
			padding: 46rpx 0;

			.list-item {
				text-align: center;

				.t0 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 600;
					font-size: 44rpx;
					color: #49a1fd;
					line-height: 60rpx;
					font-style: normal;
					min-height: 60rpx;
				}

				.t1 {
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 28rpx;
					color: #000000;
					line-height: 40rpx;
					font-style: normal;
				}
			}
		}

		.service-box {
			background: linear-gradient(180deg, #dffaff 0%, #ffffff 100%);
			box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(20, 135, 255, 0.1), inset 0px 1px 3px 0px #ffffff;
			border-radius: 28rpx;
			margin: 8rpx 34rpx;
			padding: 0 20rpx;

			.tit {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #000000;
				line-height: 44rpx;
				font-style: normal;
				position: relative;
				padding: 28rpx 0 38rpx 20rpx;

				&::before {
					position: absolute;
					content: '';
					width: 10rpx;
					height: 30rpx;
					background: #49a1fd;
					border-radius: 6rpx;
					left: 0;
					top: 36rpx;
				}
			}

			.service-list {
				display: flex;
				flex-wrap: wrap;

				.service-item {
					text-align: center;
					width: 32%;
					margin-right: 2%;
					margin-bottom: 32rpx;

					&:nth-child(3n) {
						margin-right: 0;
					}

					uni-image {
						width: 64rpx;
						height: 64rpx;
					}

					uni-text {
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #000000;
						line-height: 40rpx;
						display: block;
						font-style: normal;
					}
				}
			}
		}

	}

	.device-start {
		background: rgba(0, 0, 0, 0.6);
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		overflow: scroll;



		.start-box {
			background: url('../../static/images/home/beifen2.png') no-repeat;
			background-size: 100% 100%;
			margin: 50% 30rpx 3%;
			text-align: center;
			padding-bottom: 20rpx;

			&.djyl-bg {
				background: url('../../static/images/area/beifen1.png') no-repeat;
				background-size: 100% 100%;
			}

			.t0 {
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				line-height: 2.2rem;
				font-style: normal;
				padding-top: 10rpx;
			}

			.uni-forms {
				padding: 60rpx 40rpx 30rpx !important;

				.uni-forms-item {
					align-items: center !important;
					margin-bottom: 16rpx !important;


					.uni-forms-item__label {
						font-size: 28rpx !important;
						color: #000000 !important;
						width: 6.3rem !important;
						padding-right: 0 !important;
					}
				}
			}

			.remark-tip {
				font-size: 24rpx;
				color: #a7a5a5;
				line-height: 34rpx;
				text-align: left;
				padding: 0 40rpx 40rpx;
			}

			.btn {
				background: linear-gradient(311deg, #93a4fb 0%, #2f9afe 100%);
				box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(20, 135, 255, 0.4);
				border-radius: 44rpx;
				font-family: PingFangSC, PingFang SC;
				font-weight: 500;
				font-size: 34rpx;
				color: #ffffff;
				width: 300rpx;
				line-height: 80rpx;
				margin: 0 auto;
			}
		}

		.close {
			margin: 0 auto;
			text-align: center;
			cursor: pointer;

			uni-image {
				width: 68rpx;
				height: 68rpx;
			}
		}
	}
</style>